<template>
  <div>
    <div class="AJ-block AJ-header">
      <el-form ref="form" :model="form">
        <el-form-item label="账号" prop="account">
          <el-select v-model="form.account" :remote-method="getFilter" :loading="loading" placeholder="请选择" size="small" remote reserve-keyword filterable multiple>
            <el-option v-for="(item, index) in accountList" :key="index" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="视频名称" prop="videoName">
          <el-input v-model="form.videoName" size="small"></el-input>
        </el-form-item>
        <el-form-item label="视频ID" prop="videoId">
          <el-input v-model="form.videoId" size="small"></el-input>
        </el-form-item>
        <el-form-item label="时间" prop="time">
          <el-date-picker v-model="form.time" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" size="small" value-format="timestamp"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="small" @click="search">搜 索</el-button>
          <el-button icon="el-icon-refresh" size="small" @click="reset">重 置</el-button>
        </el-form-item>
      </el-form>
      <div>
        <el-checkbox-group v-model="headerCheckList" @change="freshTable()">
          <draggable v-model="tableHeaderList" animation="500" @end="freshTable()">
            <el-checkbox :label="item.fieldCode" v-for="item in tableHeaderList" :key="item.fieldCode">{{ item.fieldName }}</el-checkbox>
          </draggable>
        </el-checkbox-group>
      </div>
      <div>
        <el-button type="primary" size="small" @click="saveHeader" :loading="saveHeaderLoading">保存表头</el-button>
        <el-button type="primary" size="small" @click="exportFile" :loading="exportLoading">导出数据</el-button>
      </div>
    </div>
    <div class="AJ-block AJ-content">
      <el-table ref="table" :data="tableData" height="100%" :loading="tableLoading" @sort-change="tableSort" v-if="showTable">
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column v-for="item in tableHeader" :key="item.fieldCode" :prop="item.fieldCode" :label="item.fieldName" :width="item.fieldWidth" :sortable="item.fieldSortable ? 'custom' : ''" show-overflow-tooltip>
          <template slot-scope="scope">
            <template v-if="item.fieldCode == 'link'">
              <el-button type="text" @click="toLink(scope.row)">{{ scope.row.link }}</el-button>
            </template>
            <template v-else>
              {{ scope.row[item.fieldCode] }}
            </template>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="title" label="作品标题" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column prop="id" label="作品ID" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column prop="link" label="播放链接" width="150" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button type="text" @click="toLink(scope.row)">{{ scope.row.link }}</el-button>
          </template>
        </el-table-column>
        <el-table-column sortable="custom" prop="time" label="发布时间" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column prop="type" label="作品类型" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column prop="username" label="达人昵称" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column prop="userid" label="达人抖音号" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column sortable="custom" prop="duration" label="作品时长" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column sortable="custom" prop="view_count" label="观看次数" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column sortable="custom" prop="chengjiaojine" label="成交金额" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column sortable="custom" prop="chengjiaodingdan" label="成交订单数" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column sortable="custom" prop="wanbolv" label="完播率" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column sortable="custom" prop="yinliuzhibojiancishu" label="引流直播间次数" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column sortable="custom" prop="dianzancishu" label="点赞次数" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column sortable="custom" prop="pingluncishu" label="评论次数" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column sortable="custom" prop="guanzhucishu" label="点击关注次数" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column sortable="custom" prop="pingjunguankanshichang" label="平均观看时长" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column sortable="custom" prop="baoguangchengjiao" label="商品千次曝光成交" width="200" show-overflow-tooltip></el-table-column>
        <el-table-column sortable="custom" prop="yongjinshouru" label="预估佣金收入" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column sortable="custom" prop="tuikuanjine" label="退款金额" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column sortable="custom" prop="baoguangcishu" label="商品曝光次数" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column sortable="custom" prop="dianjicishu" label="商品点击次数" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column sortable="custom" prop="chengjiaozhuanhualv" label="商品曝光成交转化率" width="200" show-overflow-tooltip></el-table-column>
        <el-table-column sortable="custom" prop="zhiborukoudianjilv" label="直播入口点击率(次数)" width="200" show-overflow-tooltip></el-table-column>
        <el-table-column sortable="custom" prop="zhibojianchengjiaojine" label="引流直播间成交金额" width="200" show-overflow-tooltip></el-table-column>
        <el-table-column sortable="custom" prop="chuchuangcishu" label="引流橱窗次数" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column sortable="custom" prop="chuchuangchengjiaojine" label="引流橱窗成交金额" width="200" show-overflow-tooltip></el-table-column>
        <el-table-column sortable="custom" prop="xiaohuangchedianjilv" label="左下角小黄车点击率" width="200" show-overflow-tooltip></el-table-column>
        <el-table-column sortable="custom" prop="dianjizhuanhualv" label="商品点击转化率" width="200" show-overflow-tooltip></el-table-column>
        <el-table-column sortable="custom" prop="baoguangdianjizhuanhualv" label="商品曝光点击转化率" width="200" show-overflow-tooltip></el-table-column> -->
      </el-table>
      <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="initData()" />
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable';
import request from '@/utils/request';
export default {
  components: {
    draggable
  },
  name: 'home',
  data() {
    return {
      form: {
        account: [],
        videoName: '',
        videoId: '',
        time: []
      },
      tableData: [],
      tableHeaderList: [],
      headerCheckList: [],
      tableLoading: false,
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        order: '',
        prop: ''
      },
      total: 0,
      accountListLoading: false,
      accountList: [],
      showTable: false,
      saveHeaderLoading: false,
      exportLoading: false
    };
  },
  mounted() {
    this.renderTable();
  },
  computed: {
    tableHeader() {
      let list = this.tableHeaderList.filter(item => {
        return this.headerCheckList.indexOf(item.fieldCode) != -1;
      });
      return list;
    }
  },
  methods: {
    freshTable() {
      this.showTable = false;
      this.$nextTick(() => {
        this.showTable = true;
      });
    },
    getTableHeader() {
      return new Promise((resolve, reject) => {
        request({
          url: '/api/table/getTableHeader',
          method: 'post'
        })
          .then(res => {
            this.tableHeaderList = res.data.list;
            this.headerCheckList = res.data.list.map(item => {
              if (item.fieldCheck) {
                return item.fieldCode;
              }
            });
            this.freshTable();
            resolve(res);
          })
          .catch(e => {
            reject(e);
          });
      });
    },
    renderTable() {
      this.tableLoading = true;
      this.getTableHeader()
        .then(res => {
          this.tableLoading = false;
          this.initData();
        })
        .catch(e => {
          this.tableLoading = false;
        });
    },
    initData() {
      this.tableLoading = true;
      request({
        url: '/api/table/getTableData',
        method: 'post',
        data: { ...this.listQuery, ...this.form, startTime: this.form.time ? this.form.time[0] : '', endTime: this.form.time ? this.form.time[1] : '' }
      })
        .then(res => {
          this.tableData = res.data.list;
          this.total = res.data.total;
          this.tableLoading = false;
        })
        .catch(e => {
          this.tableLoading = false;
        });
    },
    getFilter(keyword) {
      if (keyword !== '') {
        this.accountListLoading = true;
        request({
          url: '/api/table/getAccountList',
          method: 'post',
          data: { keyword: keyword }
        })
          .then(res => {
            this.accountListLoading = false;
            this.accountList = res.data.list;
          })
          .catch(e => {
            this.accountListLoading = false;
          });
      } else {
        this.accountList = [];
      }
    },
    toLink(data) {
      if (data.link) {
        window.open(data.link, '_blank');
      }
    },
    saveHeader() {
      let saveList = JSON.parse(JSON.stringify(this.tableHeaderList));
      saveList.map(item => {
        if (this.headerCheckList.indexOf(item.fieldCode) != -1) {
          item.fieldCheck = true;
        } else {
          item.fieldCheck = false;
        }
      });
      this.saveHeaderLoading = true;
      request({
        url: '/api/table/saveHeader',
        method: 'post',
        data: saveList
      })
        .then(res => {
          this.$message({
            message: '保存成功',
            type: 'success'
          });
          this.saveHeaderLoading = false;
        })
        .catch(e => {
          this.saveHeaderLoading = false;
        });
    },
    search() {
      this.listQuery.currentPage = 1;
      this.initData();
    },
    tableSort(data) {
      this.listQuery.prop = data.prop;
      this.listQuery.order = data.order;
      this.initData();
    },
    exportFile() {
      this.exportLoading = true;
      request({
        url: '/api/table/exportFile',
        method: 'post',
        responseType: 'blob',
        data: this.tableHeaderList
      })
        .then(res => {
          this.exportLoading = false;
          const timestamp = new Date().getTime();
          let docName = this.parseTime(timestamp, '{y}-{m}-{d}') + '.xlsx';
          let blob = new Blob([res]);
          const href = window.URL.createObjectURL(blob); //创建下载的链接
          if (window.navigator.msSaveBlob) {
            window.navigator.msSaveBlob(blob, docName);
          } else {
            // 谷歌浏览器 创建a标签 添加download属性下载
            const downloadElement = document.createElement('a');
            downloadElement.href = href;
            downloadElement.target = '_blank';
            downloadElement.download = docName;
            document.body.appendChild(downloadElement);
            downloadElement.click(); // 点击下载
            document.body.removeChild(downloadElement); // 下载完成移除元素
            window.URL.revokeObjectURL(href); // 释放掉blob对象
          }
        })
        .catch(e => {
          this.exportLoading = false;
        });
    },
    reset() {
      this.$refs.form.resetFields();
    }
  }
};
</script>

<style scoped lang="less"></style>
